<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5" type="home">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '首页',
  },
}
</route>
<template>
  <view
    class="flex flex-col bg-gray-100 min-h-screen"
    :style="{ marginTop: safeAreaInsets?.top + 'px' }"
  >
    <!-- 顶部导航栏 -->
    <view class="flex justify-between items-center px-4 py-3 bg-white border-b border-gray-300">
      <text class="text-lg font-bold text-gray-800">首页</text>
      <view class="flex space-x-3">
        <text class="text-gray-600 text-lg" @tap="handleNotificationBellClick">🔔</text>
      </view>
    </view>

    <!-- 轮播图 -->
    <view class="w-full h-48 banner">
      <swiper indicator-dots autoplay circular :interval="3000">
        <swiper-item v-for="(item, index) in banners" :key="index">
          <image :src="item" class="w-full h-full object-cover" />
        </swiper-item>
      </swiper>
    </view>

    <!-- 金刚区 -->
    <view class="grid grid-cols-4 gap-4 p-4 bg-white">
      <view
        class="flex flex-col items-center"
        v-for="(item, index) in quickLinks"
        :key="index"
        @click="onQuickLinkItemClick(item)"
      >
        <image :src="item.icon" class="w-12 h-12 mb-2" />
        <text class="text-sm text-gray-700">{{ item.text }}</text>
      </view>
    </view>

    <!-- 问卷列表 -->
    <view class="mt-4 bg-white">
      <view
        class="flex p-4 border-b border-gray-300"
        v-for="(item, index) in questionnaires"
        :key="index"
        @tap="onQuestionnaireItemClick(item)"
      >
        <image :src="item.image" class="w-20 h-20 mr-4 object-cover" />
        <view class="flex-1 flex flex-col">
          <text class="text-base font-bold text-gray-800 mb-2">{{ item.title }}</text>
          <text class="text-sm text-gray-600 mb-2">{{ item.description }}</text>
          <view class="flex justify-between items-center">
            <text class="text-sm text-orange-500">最高+{{ item.points }}积分</text>
            <text class="text-sm text-gray-500">{{ item.status }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()

const banners = [
  '/static/images/index/banner/258-750x300.jpg',
  '/static/images/index/banner/813-750x300.jpg',
  '/static/images/index/banner/166-750x300.jpg',
]
const quickLinks = [
  { icon: '/static/icons/index/quick-link/100.png', text: '每日签到' },
  { icon: '/static/icons/index/quick-link/101.png', text: '邀请记录' },
  { icon: '/static/icons/index/quick-link/102.png', text: '福利专区' },
  { icon: '/static/icons/index/quick-link/103.png', text: '答卷记录' },
  { icon: '/static/icons/index/quick-link/104.png', text: '限时活动' },
  { icon: '/static/icons/index/quick-link/150.png', text: '积分商城' },
  { icon: '/static/icons/index/quick-link/151.png', text: '每日任务' },
  { icon: '/static/icons/index/quick-link/152.png', text: '推荐任务' },
]
const questionnaires = [
  {
    image: '/static/images/index/misc/316-100x100.jpg',
    title: '调研问卷1',
    description: '消费者调研-1',
    points: 300,
    status: '去参与',
  },
  {
    image: '/static/images/index/misc/558-100x100.jpg',
    title: '调研问卷2',
    description: '消费者调研-2',
    points: 50,
    status: '已下线',
  },
  {
    image: '/static/images/index/misc/573-100x100.jpg',
    title: '调研问卷2',
    description: '消费者调研-3',
    points: 50,
    status: '已下线',
  },
  {
    image: '/static/images/index/misc/612-100x100.jpg',
    title: '调研问卷4',
    description: '消费者调研-4',
    points: 50,
    status: '已下线',
  },
  {
    image: '/static/images/index/misc/939-100x100.jpg',
    title: '调研问卷5',
    description: '消费者调研-5',
    points: 50,
    status: '已下线',
  },
]

function onQuickLinkItemClick(item) {
  uni.showToast({
    title: item.text,
    icon: 'none',
  })
}

function onQuestionnaireItemClick(item) {
  uni.showToast({
    title: item.title + '\r\n' + item.description,
    icon: 'success',
  })
}

function handleNotificationBellClick() {
  uni.showToast({
    title: '消息提醒入口，请根据实际业务自行实现或去除',
    icon: 'none',
  })
}
</script>

<style></style>
